<template>
    <div>
        <div class="his-hot" v-show="isShowHistory">
            <div class="hd">
                <h3>历史记录</h3>
                <van-icon name="delete" @click="clearHistory" />
            </div>
            <div class="bd">
                <van-tag v-for="(item,index) in hisDataList" :key="index" plain type="default" @click="tagClick(item)">
                    {{item}}</van-tag>

            </div>
        </div>
        <div class="his-hot">
            <div class="hd">
                <h3>热门搜索</h3>
            </div>
            <div class="bd">
                <van-tag plain v-for="(item,index) in hotDataList" :key="index" type="default" @click="tagClick(item.keyword)"
                    :color="item.is_hot===1? '#ee0a24':''">{{item.keyword}}</van-tag>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        ClearHistory
    } from '@/request/api'
    import {
        Toast
    } from 'vant'
    export default {
        data() {
            return {
                isShowHistory:true
            }
        },
        methods: {
            tagClick(val) {
                this.$emit('tagSearch', val)
            },
            clearHistory() {
                ClearHistory().then(res => {
                    if(res.errno===0){
                        Toast.success('删除成功')
                        // 隐藏历史记录
                        setTimeout(()=>{
                            this.isShowHistory = false
                        },500)
                        

                    }else {
                        Toast.fail('删除失败')
                    }
                })
            }
        },
        props: ["hisDataList", "hotDataList"],
    }
</script>

<style lang="less" scoped>
    .his-hot {
        background-color: #fff;
        padding: .1rem;
        margin-bottom: .2rem;

        .hd {
            display: flex;
            justify-content: space-between;
            font-size: .22rem;
        }

        .bd {
            margin-top: .08rem;

            .van-tag {
                margin-right: .05rem;
                padding: .03rem;
            }
        }

    }
</style>